import { CSSProperties, FC, useEffect, useState } from 'react'
import styles from './ImageAsset.module.scss'
import { useColorVar, useStyles } from '@/hooks/styles'
import { AssetCard } from '@/components/graph/assets/AssetCard/AssetCard'
import { SvgIcon } from '@/components/icons'
import { Text } from '@/components/icons/Text'
import { Button, Image } from 'antd'
import { Port } from '@/components/graph/Port/Port'
import { Graph, Node } from '@antv/x6'
import { observer } from 'mobx-react'
import { useMetaStore } from '@/hooks'
import { StaticLayout } from '@/components/StaticLayout/StaticLayout'

interface IImageAssetProps {
  cardID?: string
  width?: CSSProperties['width']
  text?: string
  isEditable?: boolean // TODO: infer use cardID
  node?: Node
  graph?: Graph
}

const testImageURL = 'https://s3.bmp.ovh/imgs/2023/11/08/74be99b1754c6e1a.png'

export const ImageAsset: FC<IImageAssetProps> = observer(
  ({ cardID, width, isEditable, text = '', node, graph }) => {
    const c = useColorVar()
    const styleClass = useStyles(styles)
    const metaStore = useMetaStore()

    // const [textValue, setTextValue] = useState<string>(text)

    const [images, setImages] = useState([])

    const registerAsAsset = async () => {
      // TODO
      // await metaStore.registerNonAssetCardAsAsset(cardID, textValue)
    }

    return (
      <AssetCard
        width={width}
        headerColor={c('DeepBlue-background')}
        cardTitle={'图像(测试中)'}
        cardIcon={<SvgIcon icon={Text} />}
        isEditable={isEditable}
        registerAsAsset={registerAsAsset}
        node={node}
        graph={graph}
      >
        <div {...styleClass(['layout'])}>
          <StaticLayout>
            {[1, 2, 3, 4].map((v) => {
              return (
                <Button
                  key={v}
                  onClick={() => setImages(new Array(v).fill(testImageURL))}
                >
                  {v}
                </Button>
              )
            })}
            <div {...styleClass([`image-gallery`])}>
              {images.map((imageURL, i) => (
                <Image key={i} src={imageURL} />
              ))}
            </div>
          </StaticLayout>
          <div {...styleClass(['port-wrapper'])}>
            <Port
              circleColor={c('DeepBlue-main')}
              borderColor={c('DeepBlue-light')}
            />
          </div>
        </div>
      </AssetCard>
    )
  }
)
